import "./index.less"
import React, { useEffect, useState } from 'react'
import { Button } from "@mui/material"
import ArrowRightIcon from '@mui/icons-material/ArrowRight';
import { getHomePageDataApi } from "@/api";
import SubjectsItem from "./components/SubjectsItem";
export default function Home() {
    const [homeData, setHomeData] = useState<IHomeData>()

    useEffect(() => {
        getHomePageDataApi().then(res => {
            if (res.errCode === 0) {
                setHomeData(res.data)
            }
        })
    }, [])

    return (
        <div className="home">
            <div className="top">
                <h2>Java学科</h2>
                <Button variant="text">切换学科 <ArrowRightIcon /></Button>
            </div>
            <div className="wel">
                <div className="left"></div>
                <div className="right">
                    <div className="calc">
                        <div>已学{homeData?.study}题</div>
                        <div>共{homeData?.exam.itemCount}题</div>
                    </div>
                    <div className="cal2">
                        <div>
                            <span className="num">{homeData?.wrong}</span>
                            <span>错题</span>
                        </div>
                        <div>
                            <span className="num">{homeData?.collect}</span>
                            <span>收藏</span>
                        </div>
                    </div>
                </div>
            </div>
            <div className="subject-list">
                {
                    homeData?.exemItems.map(item => <SubjectsItem data={item} key={item.id} />)
                }
            </div>
        </div>
    )
}
